<style lang="less">
@import '../assets/style/select.less';
</style>
<template>
	<div class="select">
		<van-collapse v-model="activeName" accordion class="select-top">
			<van-collapse-item title="人员数" :value="peopleName.length" name="1">
				<div class="people-select">
					<span v-for="(item,index) in peopleName">{{item}}</span>
				</div>
			</van-collapse-item>
		</van-collapse>
		<div class="item_box">
			<div class="add_che" v-for="(item,index) in selectList" :key="index" :name="item">
				<span class="title" v-if="item.user && item.user.length>0">{{ item.deptName }}</span>
				<van-checkbox-group @change="formatPeople" v-if="item.user" v-model="peopleSelect">
					<van-checkbox
						v-for="clid in item.user"
						:class="clid.TYPE == '0' ? 'disCheck0' : clid.TYPE == '1' ? 'ingCheck1' : 'noCheck2' "
						:key="JSON.stringify(clid)"
						:name="JSON.stringify(clid)"
						:disabled="clid.noChecked">
						<span>{{ clid.peopleName }}</span>
					</van-checkbox>
				</van-checkbox-group>
			</div>
		</div>
		<div class="btns">
			<van-tabbar>
				<van-tabbar-item>
					<van-button size="small" class="btn_l" @click="goReset">重置</van-button>
				</van-tabbar-item>
				<van-tabbar-item>
					<van-button size="small" class="btn_r" @click="goSure">确定</van-button>
				</van-tabbar-item>
			</van-tabbar>
		</div>
	</div>
</template>

<script>
import { callData } from '../axios/axios'
import { setSession, getSession } from '../libs/cache'

import {
	Collapse,
	CollapseItem,
	Icon,
	Checkbox,
	CheckboxGroup,
	Tabbar,
	TabbarItem,
	Button,
	Dialog,
	Toast
} from 'vant';

export default {
	name: 'selecte',
	components: {
		[Collapse.name]: Collapse,
		[CollapseItem.name]: CollapseItem,
		[Icon.name]: Icon,
		[Checkbox.name]: Checkbox,
		[CheckboxGroup.name]: CheckboxGroup,
		[Tabbar.name]: Tabbar,
		[TabbarItem.name]: TabbarItem,
		[Button.name]: Button,
		[Dialog.name]: Dialog
	},
	data() {
		return {
			activeName: '2',
			selectList: [],
			routerLink:{
				name:'',
				query: {}
			},
			peopleNum: 0,
			peopleSelect: [],
			peopleName: [],
			userName: '',
			peopleId: [],
			params: this.$route.query
		}
	},
	props:{
		goRouter:{
            type: Object,
            default () {
                return {name:'',query: {}}
            }
		}
	},
	mounted () {
		this.userData();
		this.getSelectData()
	},
	methods: {
		userData(){
			var userMeg = JSON.parse(getSession('userMeg'));
			this.userName = userMeg.realname;
			this.peopleName.push(this.userName);
		},
		// 重置
		goReset() {
			this.peopleSelect = [];
		},
		// 确定
		goSure() {
			var params = {};
			params.userIds = JSON.stringify(this.peopleId);
			var index = this.params.index;
			if(index==0){
				// 0 常规巡视
				params.taskType = 0; 
			}
			else if(index==1){
				// 1 特殊巡视
				params.taskType = 1;
			}
			else if(index==2) {
				// 3 线路检修
				params.taskType = 3;
			}
			else if(index==3){
				// 2 保电值守
				params.taskType = 2;
			}
			callData('/accountServer/CmSelectTaskUser/saveCmSelectTaskUser', 'post', params).then(res => {
				if(res.success){
					var index = this.params.index;
					if(index==0){
						// 0 常规巡视
						this.$router.push({
							name: 'cgxs_xianluXunshi',
							query: {
								index: index
							}
						})
					}
					else if(index==1){
						// 1 特殊巡视
						this.$router.push({
							name: 'tsxs_xianluXunshi',
							query: {
								index: index
							}
						})
					}
					else if(index==2) {
						// 3 线路检修
						this.$router.push({
							name: 'xljx_xianluXunshi',
							query: {
								index: index
							}
						})
					}
					else if(index==3){
						// 2 保电值守
						this.$router.push({
							name: 'bdzs_xianluXunshi',
							query: {
								index: index
							}
						})
					}
				}
			})
		},
		// 拿到选中的参数|&&|处理拿到的数据，返回ID和Name
		formatPeople(people){
			console.log(456)
			let index = index
			this.peopleSelect = people
			this.peopleName = [this.userName]
			this.peopleId = []
			people.forEach((item,index) => {
				item = JSON.parse(item)
				this.peopleId.push(item.USERID)
				this.peopleName.push(item.REALNAME)
				setSession('peopleName',this.peopleName)
			})
		},
		// 获取Select的参数
		getSelectData() {
			var params ={};
			// 根据模块索引index判断任务类型taskType
			var index = this.params.index;
			if(index==0){
				// 0 常规巡视
				params.taskType = 0; 
			}
			else if(index==1){
				// 1 特殊巡视
				params.taskType = 1;
			}
			else if(index==2) {
				// 3 线路检修
				params.taskType = 3;
			}
			else if(index==3){
				// 2 保电值守
				params.taskType = 2;
			}
			callData('/accountServer/CmSelectTaskUser/findCmSelectTaskUser', 'get', params).then(res => {
				if(res.success){
					var data = res.data,
					ryData = [],
					checkedRyName = [],
					checkedRy = [];
					// 巡视小组
					data.forEach((item,index) => {
						var ryObj = {}
							ryObj.deptName = item.DEPT_NAME
							ryObj.id = item.ID
						if(item.USER){
							var user = item.USER
							user.forEach((child,index) => {
								child.peopleName = child.REALNAME
								// 0 灰色不可选
								if(child.TYPE == 0) child.noChecked = true
								// 1 绿色选中
								else if(child.TYPE == 1) checkedRy.push(JSON.stringify(child))
								checkedRyName.push(child.REALNAME)
							})
							ryObj.user = user
						}
						ryData.push(ryObj)
					})
					this.selectList = ryData
					this.formatPeople(checkedRy)
				}
				else {
					Toast('此人已选，不可再选')
				}
			})
		},
	},
	watch:{
		goRouter(val){
			this.routerLink = val
		}
	}
}
</script>
